import { defineComponent, reactive } from "vue";
import classes from "./index.module.less";
import { ElButton, ElDatePicker } from "element-plus";
import OrgTreeSelect from "./OrgTreeSelect";

const ScreenSearch = defineComponent({
  name: "ScreenSearch",
  setup() {
    const state = reactive({
      tab: 0,
      tabs: [
        { text: "当月累计", value: 0 },
        { text: "当年累计", value: 1 },
      ],
      date: "",
      deptId: "",
    });
    return () => (
      <div class={classes.search}>
        <div class={classes.left}>
          <div>选择全院/院区/科室：</div>
          <div class={classes.tab}>
            {state.tabs.map((t) => (
              <span
                onClick={() => (state.tab = t.value)}
                key={t.value}
                class={[classes.item, state.tab == t.value && classes.selected]}
              >
                {t.text}
              </span>
            ))}
          </div>
          <div>
            <ElDatePicker
              popperClass={classes.datepicker}
              class={classes.dateinput}
              modelValue={state.date}
              clearable={false}
              onUpdate:modelValue={(v) => (state.date = v)}
              type="month"
            />
          </div>
        </div>
        <div class={classes.btn}>结论简报</div>
      </div>
    );
  },
});

export default ScreenSearch;
